<template>
	<div class="m-playlist u-paddlr u-paddbm">
		<playerheader :playlists="playlists"></playerheader>
		<div>
			<!--  -->
			<div class="intro">
				<div class="lstit_tags">
					标签: <tag class="lstit_tag" v-for="tag in playlists.tags" :key="tag.id" :tagName="tag"></tag>
				</div>
				<div class="playerlist_intro">
					<div class="f-brk f-thide3" ref="thide3">
						<span v-for="desc in description" :key="desc.id">
							<i>{{desc}}</i>
							<br>
						</span>
					</div>
					<arowdown @thide3="toggleThide3" v-if="description.length>1"></arowdown>
				</div>
			</div>
			<!--  -->
			<!-- <section class="u-plhead pylst_header">
				<div class="plhead_bg"></div>
				<div class="plhead_warp">
					<div class="plhead_fl lsthd_fl"> -->
			<!-- <img class="u-img" src="https://p1.music.126.net/k3nXE2jykUNddktrqTI5ag==/109951164802561599.jpg?imageView=1&amp;type=webp&amp;thumbnail=252x0"> -->

			<!-- 	<img :src="'playlists.al.picUrl'" alt="" class="u-img">
					</div>
					<div class="plhead_fr">
						<h2 class="f-thide2 f-brk lsthd_title">我们的乐队独家音频全收录</h2>
					</div>
				</div>
			</section> -->
			<div class="pylst_list">
				<h3 class="u-smtitle">歌曲列表</h3>
				<div class="songlist" v-if="playlists.tracks">
					<div class="m-sglst" v-for="(item,index) in handletracks(playlists.tracks)" :key="item.id">
						<router-link :to="'/song?id='+item.id" class="flex w100">
							<div class="sgfl">
								{{index+1}}
							</div>
							<songlist :singer="item.singer" :album="item.album" :songname="item.songname"></songlist>
						</router-link>
						
					</div>
				</div>
				
			</div>
		</div>

	</div>
</template>

<script>
	import api from "@/config/api.js";
	import playerheader from "@/components/playlist/playheader.vue"
	import tag from "@/components/playlist/tag.vue";
	import arowdown from "@/components/playlist/arowdown.vue";
	import songlist from "@/components/base/songlist.vue"

	export default {
		data() {
			return {
				listId: '',
				playlists: {},
				picUrls: ''
			}
		},
		components: {
			// baseImage
			playerheader,
			tag,
			arowdown,
			songlist
		},
		mounted() {
			// 
			// console.log(this.$route);
			this.listId = this.$route.query.id || "";
			this.$axios({
				method: "get",
				url: api.detail,
				params: {
					id: this.listId
				}
			}).then(res => {
				// console.log(res)
				this.playlists = res.data.playlist;
				// this.playlists = res.data.playlist;
				// console.log(this.playlists)
			})
		},
		methods: {
			toggleThide3() {
				this.$refs.thide3.classList.toggle("f-thide3");
			},
			handletracks(tracks) {
				var t = [];
				tracks.forEach(item=>{
					var obj = {
						songname:'',
						singer:'',
						album:'',
					}
					let tmp = [];//拼接多个歌手
					item.ar.forEach((el)=>{
						tmp.push(el.name)
					})
					obj.singer=tmp.join('/');
					obj.album=item.al.name;
					obj.songname=item.name;
					obj.id=item.id;
					t.push(obj);
				})
				// console.log(t);
				return t;
			}
		},
		computed: {
			description() {
				// 针对ajax数据没来,容错的处理
				return !this.playlists.description ? [] : this.playlists.description.split("\n");
			}
		}
	}
</script>

<style lang="scss" scoped>
	a {
		text-decoration: none;
		color: #333;
	}
	.flex{
		display: flex;
	}
	.w100{
		width: 100%;
	}
	.u-hmsprt {
		background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) no-repeat;
		background-size: 166px 97px;
	}

	.sgchply {
		display: inline-block;
		width: 22px;
		height: 22px;
		background-position: -24px 0;
	}

	.sgchfr {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	.f-thide {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
	}

	.sginfo {
		font-size: 12px;
		color: #888;
	}

	.sgchfl {
		padding: 6px 0;
		width: 80vw;
	}

	.sgfr {
		display: flex;
		position: relative;
	}

	.sgfr {
		flex: 1 1 auto;
	}

	.m-sglst {
		padding-left: 10px;
		display: flex;
	}

	.sgfl {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		font-size: 17px;
		color: #999;
		margin-left: -10px;
	}

	.u-smtitle {
		height: 23px;
		line-height: 23px;
		padding: 0 10px;
		font-size: 12px;
		color: #666;
		background-color: #eeeff0;
	}

	.plhead_fr {
		flex: 1 1 auto;
		width: 1%;
		margin-left: 130px;
		height: 126px;
		width: 208px;
		position: absolute;
		z-index: 111;
	}

	.f-brk {
		word-wrap: break-word;
		white-space: normal;
		font-style: normal;
	}

	.f-brk span i {
		font-style: normal;
	}

	.f-thide2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pylst_header .lsthd_title {
		padding-top: 1px;
		font-size: 0.9rem;
		line-height: 1.3;
		color: #fefefe;
		height: 44px;
		display: -webkit-box;
		-webkit-box-pack: center;
	}

	.m-playlist {
		background-color: #f8f8f8;
		min-height: 100%;
	}

	.u-paddlr {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	.u-paddbm {
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 
	.intro {
		position: relative;
		margin: 0 10px 0 15px;
		padding-top: 10px;
		line-height: 19px;
		color: #666;
	}

	.lstit_tag {
		display: inline-block;
		margin-right: 10px;
		padding: 1px 8px;
		font-size: 12px;
	}

	.lstit_tag:after {
		border-radius: 9999px;
	}

	.playerlist_intro {
		position: relative;
		padding-bottom: 18px;
		line-height: 19px;
		color: #666;
	}

	.f-thide2,
	.f-thide3,
	.f-thide4 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.f-thide3 {
		-webkit-line-clamp: 3;
	}

	.lstit_tags {
		margin-bottom: 10px;
		line-height: 20px;
		margin-right: -10px;
	}
</style>
